<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>

<body>
    <script type="text/javascript">
    // context是一个封装了很多绘图功能的对象
    var context = canvas.getContext("2d");

    // canvas元素绘制图像的时候有两种方法，分别是

    context.fill() //填充

    context.stroke() //绘制边框

    // style:在进行图形绘制前，要设置好绘图的样式

    context.fillStyle //填充的样式

    context.strokeStyle //边框样式

    context.lineWidth //图形边框宽度
    </script>
</body>

</html>
